import { getApiConfig } from '../../../config/api'
import { useState, useEffect } from 'react'
import { View, Text, Picker, Slider, Button, Form, Input, CoverView, CoverImage, Image } from '@tarojs/components'
import Taro, { useLoad, showToast } from '@tarojs/taro'

import childtitleImg from '../../assets/images/index/childtitle.png'
import queryformImg from '../../assets/images/index/queryform.png'
import guizeImg from '../../assets/images/index/guize.png'
import liangdianImg from '../../assets/images/index/liangdian.png'
import './index.scss'

const apiConfig = getApiConfig()

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.')
    
    // 测试事件绑定
  })

  // 省市数据
  const provinces = [
    '北京市', '上海市', '天津市', '重庆市',
    '广东省', '江苏省', '浙江省', '山东省', 
    '河南省', '河北省', '湖南省', '湖北省',
    '福建省', '安徽省', '四川省', '辽宁省',
    '陕西省', '江西省', '黑龙江省', '吉林省',
    '广西壮族自治区', '内蒙古自治区', '山西省', '云南省',
    '海南省', '贵州省', '甘肃省', '青海省',
    '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区'
  ]
  
  // 行业数据（按分类）
  const industryCategories = [
    {
      title: '科技类',
      items: ['网络科技', '生物科技', '信息技术', '电子科技', '软件科技', '新能源', '科技', '能源科技', '农业科技']
    },
    {
      title: '建筑机械类',
      items: ['装修装饰', '建筑工程', '消防', '建筑材料', '园林', '防水', '物业', '制造业', '机械设备']
    },
    {
      title: '文化传媒类',
      items: ['娱乐', '广告传媒', '影视', '文化传媒', '旅游', '体育科技', '医疗器械', '健康管理', '家政']
    },
    {
      title: '其他类',
      items: ['餐饮管理', '汽车租赁', '电子商务', '劳务派遣', '外贸', '医药', '光伏', '物流', '农业']
    }
  ]

  // 字数选项
  const word_nums = [2, 3, 4]

  // 表单状态
  const [province, setProvince] = useState('')
  // 名字建议数据
  const [nameSuggestions, setNameSuggestions] = useState<any[]>([])
  // 显示名字建议弹窗
  const [showNameSuggestions, setShowNameSuggestions] = useState(false)
  
  // 提交弹窗状态
  const [showSubmitPopup, setShowSubmitPopup] = useState(false)
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [phoneValid, setPhoneValid] = useState(false)
  const [code, setCode] = useState('')
  const [countdown, setCountdown] = useState(0)
  
  const [city, setCity] = useState('')
  const [industry, setIndustry] = useState('')
  const [word_num, setword_num] = useState(2)
  const [companyName, setCompanyName] = useState('')
  
  // 验证手机号
  const validatePhone = () => {
    const reg = /^1[3-9]\d{9}$/
    setPhoneValid(reg.test(phone))
  }

  // 发送验证码
  const sendVerificationCode = () => {
    // 这里模拟发送验证码，实际项目中应该调用API
    console.log('发送验证码到:', phone)
    
    // 开始倒计时60秒
    setCountdown(60)
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  // 弹窗内的提交
  const handlePopupSubmit = () => {
    if (!name) {
      showToast({ title: '请输入姓名', icon: 'none' })
      return
    }
    if (!phone) {
      showToast({ title: '请输入手机号', icon: 'none' })
      return
    }
    if (!phoneValid) {
      showToast({ title: '手机号格式不正确', icon: 'none' })
      return
    }
    if (phoneValid && !code) {
      showToast({ title: '请输入验证码', icon: 'none' })
      return
    }
    
    console.log('提交信息：', { name, phone, code })
    setShowSubmitPopup(false)
    
    // 调用原有的提交逻辑
    handleSubmit()
  }
  
  // 弹窗状态
  const [showProvincePopup, setShowProvincePopup] = useState(false)
  const [showCityPopup, setShowCityPopup] = useState(false)
  const [showIndustryPopup, setShowIndustryPopup] = useState(false)
  
  // 城市数据
  const [cities, setCities] = useState<string[]>([])
  const [loadingCities, setLoadingCities] = useState(false)

  // 模拟从接口获取城市数据
  const fetchCities = async (provinceName: string) => {
    setLoadingCities(true)
    try {
      // 模拟API调用，实际项目中这里应该是真实的API请求
      // const response = await fetch(`https://your-api.com/cities?province=${provinceName}`)
      // const data = await response.json()
      
      // 模拟数据
      const cityData: Record<string, string[]> = {
        '北京市': ['北京市'],
        '上海市': ['上海市'],
        '天津市': ['天津市'],
        '重庆市': ['重庆市'],
        '广东省': ['广州市', '深圳市', '珠海市', '佛山市', '东莞市', '中山市', '惠州市', '汕头市'],
        '江苏省': ['南京市', '苏州市', '无锡市', '常州市', '徐州市', '南通市', '连云港市', '淮安市'],
        '浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市'],
        '山东省': ['济南市', '青岛市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市'],
        '河南省': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市'],
        '河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市'],
        '湖南省': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市'],
        '湖北省': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市'],
        '福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市'],
        '安徽省': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市'],
        '四川省': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市'],
        '辽宁省': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市'],
        '陕西省': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市'],
        '江西省': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市'],
        '黑龙江省': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市'],
        '吉林省': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市'],
        '广西壮族自治区': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市'],
        '内蒙古自治区': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市'],
        '山西省': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市'],
        '云南省': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市'],
        '海南省': ['海口市', '三亚市', '三沙市', '儋州市'],
        '贵州省': ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市'],
        '甘肃省': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市'],
        '青海省': ['西宁市', '海东市'],
        '西藏自治区': ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市'],
        '宁夏回族自治区': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
        '新疆维吾尔自治区': ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区']
      }
      
      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      
      setCities(cityData[provinceName] || [])
    } catch (error) {
      console.error('获取城市数据失败:', error)
      setCities([])
    } finally {
      setLoadingCities(false)
    }
  }

  // 处理省份选择
  const handleProvinceSelect = (provinceName: string) => {
    setProvince(provinceName)
    setCity('') // 重置城市选择
    setShowProvincePopup(false)
    
    // 获取城市数据
    fetchCities(provinceName)
  }

  // 处理城市选择
  const handleCitySelect = (cityName: string) => {
    setCity(cityName)
    setShowCityPopup(false)
  }

  // 处理行业选择
  const handleIndustrySelect = (industryName: string) => {
    setIndustry(industryName)
    setShowIndustryPopup(false)
  }

  // 处理字数选择
  const handleword_numChange = (e) => {
    setword_num(e.detail.value)
  }

  // 提交表单
  const handleSubmit = () => {
    console.log('handleSubmit called')
    if (!province || !city || !industry) {
      console.log('请填写完整信息')
      showToast({
        title: '请填写完整信息',
        icon: 'none'
      })
      return
    }

    const formData = {
      province,
      city,
      industry,
      word_num
    }

    console.log('提交的数据:', formData)
    
    // 这里可以发送数据到后端服务器
    // 示例：

    Taro.showLoading({
      title: '正在奋力查找...',
      mask: true
    })
    Taro.request({
      url: apiConfig.baseUrl+'/ldy_index/api_ai_result',
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
      },
      data: formData,
      success: (res) => {
        console.log('Success:', res.data)
        if (res.data?.code === 1 && res.data?.data?.length) {
          setNameSuggestions(res.data.data)
          setShowNameSuggestions(true)
        }
      },
      fail: (error) => {
        console.error('Error:', error)
      },
      complete: () => {
        Taro.hideLoading()
      }
    })
    
    console.log('表单已提交到后端服务器')
  }


  return (
    <View className='naming-container'>
      <View className='header'>
        <Image 
          src={childtitleImg} 
          className='header-image' 
          mode='widthFix'
        />
      </View>
      
      <Form className='naming-form'>
        <View className='form-item'>
          <Text className='label'>选择省市:</Text>
          <View className='picker-row'>
            <View 
              className='picker-display'
              onClick={() => setShowProvincePopup(true)}
            >
              {province || '请选择省份'}
            </View>
            
            <View 
              className={`picker-display ${!province ? 'disabled' : ''}`}
              onClick={() => province && setShowCityPopup(true)}
            >
              {city || '请选择城市'}
            </View>
          </View>
        </View>
        
        <View className='form-item'>
          <Text className='label'>选择行业:</Text>
          <View 
            className='picker-display'
            onClick={() => setShowIndustryPopup(true)}
          >
            {industry || '请选择行业'}
          </View>
        </View>
        
        <View className='form-item'>
          <Text className='label'>名字字数: {word_num}个字</Text>
          <Slider
            min={2}
            max={4}
            value={word_num}
            onChange={handleword_numChange}
            showValue={false}
            activeColor='#1aad19'
          />
          <View className='word-count-options'>
            {word_nums.map(count => (
              <Text 
                key={count}
                className={`word-count-option ${word_num === count ? 'selected' : ''}`}
                onClick={() => setword_num(count)}
              >
                {count}个字
              </Text>
            ))}
          </View>
        </View>

        
        <View
          className='submit-image-container'
          onClick={() => handleSubmit()}
          style={{ position: 'relative', zIndex: 100 }}
        >
          <Image
            src={queryformImg}
            className='submit-image'
            mode='widthFix'
          />
        </View>
        
      
      </Form>
      
      {/* 省份选择弹窗 */}
      {showProvincePopup && (
        <View className='popup-overlay' onClick={() => setShowProvincePopup(false)}>
          <View className='popup-container' onClick={(e) => e.stopPropagation()}>
            <View className='popup-header'>
              <Text className='popup-title'>选择省份</Text>
              <Text 
                className='popup-close'
                onClick={() => setShowProvincePopup(false)}
              >
                完成
              </Text>
            </View>
            <View className='popup-content'>
              <View className='option-list'>
                {provinces.map((provinceItem, index) => (
                  <View 
                    key={index}
                    className={`option-item ${province === provinceItem ? 'selected' : ''}`}
                    onClick={() => handleProvinceSelect(provinceItem)}
                  >
                    <Text className='option-text'>{provinceItem}</Text>
                    {province === provinceItem && (
                      <Text className='option-check'>✓</Text>
                    )}
                  </View>
                ))}
              </View>
            </View>
          </View>
        </View>
      )}
      
      {/* 城市选择弹窗 */}
      {showCityPopup && (
        <View className='popup-overlay' onClick={() => setShowCityPopup(false)}>
          <View className='popup-container' onClick={(e) => e.stopPropagation()}>
            <View className='popup-header'>
              <Text className='popup-title'>选择城市</Text>
              <Text 
                className='popup-close'
                onClick={() => setShowCityPopup(false)}
              >
                完成
              </Text>
            </View>
            <View className='popup-content'>
              {loadingCities ? (
                <View className='loading'>加载中...</View>
              ) : (
                <View className='option-list'>
                  {cities.map((cityItem, index) => (
                    <View 
                      key={index}
                      className={`option-item ${city === cityItem ? 'selected' : ''}`}
                      onClick={() => handleCitySelect(cityItem)}
                    >
                      <Text className='option-text'>{cityItem}</Text>
                      {city === cityItem && (
                        <Text className='option-check'>✓</Text>
                      )}
                    </View>
                  ))}
                </View>
              )}
            </View>
          </View>
        </View>
      )}
      
      {/* 行业选择弹窗 */}
      {showIndustryPopup && (
        <View className='popup-overlay' onClick={() => setShowIndustryPopup(false)}>
          <View className='popup-container' onClick={(e) => e.stopPropagation()}>
            <View className='popup-header'>
              <Text className='popup-title'>选择行业</Text>
              <Text 
                className='popup-close'
                onClick={() => setShowIndustryPopup(false)}
              >
                完成
              </Text>
            </View>
            <View className='popup-content'>
              {industryCategories.map((category, categoryIndex) => (
                <View key={categoryIndex}>
                  <View className='category-title'>{category.title}</View>
                  <View className='option-list'>
                    {category.items.map((industryItem, index) => (
                      <View 
                        key={index}
                        className={`option-item ${industry === industryItem ? 'selected' : ''}`}
                        onClick={() => handleIndustrySelect(industryItem)}
                      >
                        <Text className='option-text'>{industryItem}</Text>
                        {industry === industryItem && (
                          <Text className='option-check'>✓</Text>
                        )}
                      </View>
                    ))}
                  </View>
                </View>
              ))}
            </View>
          </View>
        </View>
      )}
      
      {/* 底部图片 */}
      <View className='footer-images'>
        <Image 
          src={guizeImg} 
          className='footer-image'
          mode='widthFix'
        />
        <Image 
          src={liangdianImg} 
          className='footer-image'
          mode='widthFix'
        />
      </View>
      
      {/* 提交信息弹窗 */}
      {showSubmitPopup && (
        <View className='popup-overlay' onClick={() => setShowSubmitPopup(false)}>
          <View className='popup-container' onClick={(e) => e.stopPropagation()}>
            <View className='popup-header'>
              <Text className='popup-title'>填写信息</Text>
              <Text
                className='popup-close'
                onClick={() => setShowSubmitPopup(false)}
              >
                关闭
              </Text>
            </View>
            <View className='popup-content'>
              <View className='form-item'>
                <Text className='label'>姓名</Text>
                <Input
                  className='input'
                  placeholder='请输入姓名'
                  value={name}
                  onInput={(e) => setName(e.detail.value)}
                />
              </View>
              <View className='form-item'>
                <Text className='label'>手机号</Text>
                <Input
                  className='input'
                  placeholder='请输入手机号'
                  type='number'
                  maxlength={11}
                  value={phone}
                  onInput={(e) => setPhone(e.detail.value)}
                  onBlur={validatePhone}
                />
                {!phoneValid && phone && (
                  <Text style={{ color: 'red', fontSize: '24rpx', marginTop: '10rpx' }}>手机号格式不正确</Text>
                )}
              </View>
              {phoneValid && (
                <>
                  <View className='form-item'>
                    <Text className='label'>验证码</Text>
                    <View style={{ display: 'flex', gap: '20rpx' }}>
                      <Input
                        className='input'
                        placeholder='请输入验证码'
                        value={code}
                        onInput={(e) => setCode(e.detail.value)}
                        style={{ flex: 1 }}
                      />
                      <Button
                        style={{
                          background: countdown > 0 ? '#ccc' : '#667eea',
                          color: '#fff',
                          borderRadius: '24rpx',
                          padding: '0 20rpx',
                          minWidth: '180rpx'
                        }}
                        disabled={countdown > 0}
                        onClick={sendVerificationCode}
                      >
                        {countdown > 0 ? `${countdown}秒后重发` : '发送验证码'}
                      </Button>
                    </View>
                  </View>
                </>
              )}
              <View className='form-item' style={{ marginTop: '40rpx' }}>
                <Button
                  style={{
                    background: '#667eea',
                    color: '#fff',
                    borderRadius: '40rpx',
                    fontSize: '36rpx',
                    height: '80rpx',
                    lineHeight: '80rpx'
                  }}
                  onClick={handlePopupSubmit}
                >
                  立即生成
                </Button>
              </View>
            </View>
          </View>
        </View>
      )}

      {/* 名字建议弹窗 */}
      {showNameSuggestions && (
        <View className='popup-overlay' onClick={() => setShowNameSuggestions(false)}>
          <View className='popup-container' onClick={(e) => e.stopPropagation()}>
            <View className='popup-header'>
              <Text className='popup-title'>为您推荐的公司名称</Text>
              <Text
                className='popup-close'
                onClick={() => setShowNameSuggestions(false)}
              >
                关闭
              </Text>
            </View>
            <View className='popup-content' style={{ padding: '20rpx' }}>
              {nameSuggestions.map((item, index) => (
                <View key={index} className='name-suggestion-item'>
                  <View className='name-row'>
                    <Text className='chinese-name'>{item.name}</Text>
                    <Text className='english-name'>{item.english}</Text>
                  </View>
                  {/* <Text className='pinyin'>{item.pinyin}</Text> */}
                  <Text className='desc'>{item.desc}</Text>
                  <View className='tags'>
                    {item.keywords.map((kw, i) => (
                      <Text key={i} className='tag'>{kw}</Text>
                    ))}
                  </View>
                </View>
              ))}
            </View>
          </View>
        </View>
      )}
    </View>
  )
  
}

